<template>
    <div class="index">
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(v,i) in imgList" :key="i">
                    <img :src="v" alt="">
                </van-swipe-item>
            </van-swipe>
            <div class="search_home">
              <div class="search">
                <div class="city" @click="GoCity">{{city}}</div>
                <div class="sera">
                  <van-icon name="search" />
                  <span>请输入小区或地址</span>
                </div>
              </div>
              <van-icon name="add-o" @click="handleGo" />
            </div>
        </div>
        <van-grid>
            <van-grid-item icon="wap-home-o" text="整租" to="/home/room" />
            <van-grid-item icon="friends-o" text="合租" to="/home/room" />
            <van-grid-item icon="location-o" text="地图找房" to="/map" />
            <van-grid-item icon="hotel-o" text="去出租" to="/adminroom" />
        </van-grid>
        <div class="group">
            <div class="group-box">
                <p>租房小组</p>
                <span>更多</span>
            </div>
            <div class="group-son">
              <dl v-for="v in rentList" :key="v.id" >
                <dt>
                  <h3>{{v.title}}</h3>
                  <p>{{v.desc}}</p>
                </dt>
                <dd>
                  <img :src="v.imgSrc" alt="">
                </dd>
              </dl>
            </div>
        </div>
        <div class="news">
          <h3>最新资讯</h3>
          <div class="roomlist">
            <dl v-for="v in roomList" :key="v.id">
              <dt><img :src="v.imgSrc" alt=""></dt>
              <dd>
                <li>{{v.title}}</li>
                <p>
                  <span>{{v.from}}</span>
                  <span>{{v.date}}</span>
                </p>
              </dd>
            </dl>
          </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      imgList: [],
      rentList: [],
      roomList: []
    }
  },
  computed: {
    ...mapState(['city'])
  },
  created () {
    this.getImgList()
    this.getRentData()
    this.getRoomList()
  },
  methods: {
    async getImgList () { // 获取图片数据
      const { data: res } = await this.$http.get('/home/swiper')
      res.body.map(item => {
        this.imgList.push('https://api-haoke-web.itheima.net' + item.imgSrc)
      })
    },
    async getRentData () {
      const { data: res } = await this.$http.get('/home/groups')
      res.body.map(item => {
        item.imgSrc = 'https://api-haoke-web.itheima.net' + item.imgSrc
      })
      this.rentList = res.body
    },
    async getRoomList () {
      const { data: res } = await this.$http.get('/home/news')
      res.body.map(item => {
        item.imgSrc = 'https://api-haoke-web.itheima.net' + item.imgSrc
      })
      this.roomList = res.body
    },
    handleGo () {
      this.$router.push('/map')
    },
    GoCity () {
      this.$router.push('/citylist')
    }
  }
}
</script>

<style lang="scss" scoped>
.index{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.swiper{
    width: 100%;
    height: 220px;
    position: relative;
}
.search_home{
  position: absolute;
  top: 30px;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 35px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search{
    flex: 1;
    height: 100%;
    margin: 0 10px;
    padding: 5px 5px 5px 8px;
    background: #fff;
    border-radius: 5px;
    font-size: 0.13rem;
    display: flex;
    align-items: center;
    .sera{
      display: flex;
      margin-left: 12px;
      padding-left: 12px;
      border-left: 1px solid #ccc;
      align-items: center;
      color: dimgray;
    }
  }
  >.van-icon{
    font-size: 20px;
  }
}
.my-swipe {
    width: 100%;
    height: 220px;
    img {
        width: 100%;
        height: 100%;
    }
}
.group{
    width: 100%;
    padding: 0 10px;
    .group-box{
        width: 100%;
        margin: 15px 0;
        display: flex;
        padding: 0 15px;
        align-items: center;
        justify-content: space-between;
        font-size: 0.13rem;
        p{
          font-weight: bold;
        }
        span{
          color: dimgray;
        }
    }
    .group-son{
      width: 100%;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      dl{
        width: 48%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;
        font-size: 0.13rem;
        padding: 5px;
        margin-bottom: 10px;
        img{
          width: 50px;
          height: 50px;
        }
      }
    }
}
.news{
  width: 100%;
  padding: 5px;
  background: #fff;
  >h3{
    margin: 10px 0 5px 10px;
    font-size: 0.3rem;
  }
  .roomlist{
    width: 100%;
    padding: 5px 10px;
    dl{
      width: 100%;
      display: flex;
      font-size: 0.13rem;
      margin: 10px 0;
      padding: 0 10px 0 0;
      dt{
        width: 100px;
        margin-right: 10px;
        img{
          width: 100%;
        }
      }
      dd{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p{
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
